<!DOCTYPE html>
<html lang="zh" style="font-size: 42px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大转盘抽奖</title>
    <link rel="stylesheet" href="${ctxPath}/static/css/turntable.css?v=0.002">
    <script src="${ctxPath}/webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="${ctxPath}/static/js/turntable.js"></script>
    <script type="text/javascript" src="${ctxPath}/webjars/github-com-sentsin-layer-/3.1.1/layer.js"></script>
</head>
<body>
<div id="wrap">
    <!--规则-->
    <div class="caidai"></div>
    <div class="header clearfix">
        <p class="rule fl">详情</p>
        <a href="javascript:void(0);" id="myWin">
            <p class="my fr">我的奖品</p>
        </a>
        <div class="title"></div>
    </div>
    <!--轮盘-->
    <div class="lottery">
        <canvas id="myCanvas" width="600" height="600">
            当前浏览器版本过低，请使用其他浏览器尝试
        </canvas>
        <img src="/static/images/start.png" id="start">
    </div>
    <!--游戏规则弹窗-->
    <div id="mask-rule">
        <div class="box-rule">
            <span class="star"></span>
            <h2>活动详情</h2>
            <span id="close-rule"></span>
            <div class="con">
                <div class="text" id="rule">
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                </div>
            </div>
        </div>
    </div>
    <!--&lt;!&ndash;中奖弹窗&ndash;&gt;-->
    <div id="mask">
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <div class="red-head"></div>
            <div class="red-body">
                <div id="message"></div>
            </div>
            <div id="card">
                <a class="win"><img src="${ctxPath}/static/images/prize2.png"></a>
            </div>
            <a href="javascript:void(0);" onclick="view.result();" class="btn"></a>
            <!--<span id="close"></span>-->
        </div>
    </div>
    <!--中奖次数提示-->
    <!--<div class="border">-->
    <!--您今日还有 <span id="change"> 3 </span> 次抽奖机会-->
    <!--</div>-->

    <!--&lt;!&ndash;滚动信息&ndash;&gt;-->
    <div class="scroll">
        <!--<p></p>-->
        <div>
            <ul>
                <li id="content">活动内容</li>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">
    var view = {
        activityId: 1,
        wheelSurf: null,
        initData: [],
        throttle: true,
        winActivityAwards: null,
        init: function () {
            var that = this;
            $.get('${ctxPath}/fls/lottery/get/' + that.activityId, function (res) {
                if (res.status) {
                    $('#content').html(res.activity.name);
                    $('#rule').html(res.activity.content + res.activity.rule + res.activity.precautions + res.activity.remark);

                    //请求奖项
                    // 格式化成插件需要的奖品列表格式
                    for (var i = 0; i < res.activityAwards.length; i++) {
                        that.initData.push({
                            id: res.activityAwards[i].id,
                            name: res.activityAwards[i].name + res.activityAwards[i].nick,
                            image: res.activityAwards[i].remark,
                            rank: i + 1,
                            percent: res.activityAwards[i].probability
                        })
                    }
                    that.wheelSurf = $('#myCanvas').WheelSurf({
                        list: that.initData, // 奖品 列表，(必填)
                        outerCircle: {
                            color: '#df1e15' // 外圈颜色(可选)
                        },
                        innerCircle: {
                            color: '#f4ad26' // 里圈颜色(可选)
                        },
                        dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
                        disk: ['red', 'blue', '#ffe8b5', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
                        title: {
                            color: '#5c1e08',
                            font: '19px Arial'
                        } // 奖品标题样式(可选)
                    });
                    // 初始化转盘
                    that.wheelSurf.init();
                    $("#start").on('click', function () {
                        that.getGift();
                    });


                    var $maskRule = $("#mask-rule");//规则遮罩层

                    $(".rule").click(function () {
                        $maskRule.show();
                    });
                    $("#close-rule").click(function () {
                        $maskRule.hide();
                    });
                } else {
                    alert(res.msg);
                }
            });
        },
        getGift: function () {
            var that = this;
            $(this).remove();
            $.get('${ctxPath}/fls/lottery/lottery/' + that.activityId, function (res) {
                if (res.status) {
                    var result = that.initData[that.initData.length - 1];
                    that.winActivityAwards = res.activityAwards;
                    for (var i = 0; i < that.initData.length; i++) {
                        if (res.activityAwards.id === that.initData[i].id) {
                            result = that.initData[i];
                            break;
                        }
                    }
                    var winData = result; // 正常情况下获奖信息应该由后台返回
                    that.throttle = false;
                    var count = 0;
                    // 计算奖品角度
                    for (const key in that.initData) {
                        if (that.initData.hasOwnProperty(key)) {
                            if (winData.id === that.initData[key].id) {
                                break;
                            }
                            count++
                        }
                    }
                    var angel = 360 / that.initData.length;
                    // 转盘抽奖，
                    that.wheelSurf.lottery((count * angel + angel / 2), function () {
                        $("#message").html(winData.name);
                        $(".win img").attr("src", winData.image);
                        that.thatthrottle = true;
                        that.win();
                    });
                } else {
                    alert(res.msg);
                }
            });
            return this.initData[1];
        },
        win: function () {
            var $mask = $("#mask"),//红包遮罩层
                $winning = $(".winning"),//红包
                $card = $("#card"),
                $close = $("#close");
            //遮罩层显示
            $mask.show();
            $winning.addClass("reback");
            setTimeout(function () {
                $card.addClass("pull");
            }, 500);
        },
        result() {
            layer.msg('请填写个人信息，方便兑奖');
            $('#mask').hide();
            $('#personal-info').show();
        }
    };
    $(function () {
        view.init();
    });
</script>
</body>
</html>